<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <title>Simple example - Editor.md examples</title>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/editormd.css" />
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
</head>
<body>
<!--<div id="layout">
    <header>
        <h1>Simple example</h1>
    </header>
    <div id="test-editormd">
        <textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc" id="editormd">[TOC]</textarea>
        &lt;!&ndash; 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 &ndash;&gt;
        &lt;!&ndash; html textarea 需要开启配置项 saveHTMLToTextarea == true &ndash;&gt;
        <textarea class="editormd-html-textarea" name="editorhtml" id="editorhtml">[TOC]</textarea>
    </div>
</div>-->
<!-- 构造form表单，以便提交数据-->
    <div id="test-editormd">
    <input id="blog_title" name="title" value="" style="display: none;">标题</input>
    <textarea id="blog_html" name="html" value="" style="display: none;">[TOC]</textarea>
    </div>
<!--<div class="row">
    <div class="panel panel-primary">
        <div class="page-header">
            <div class="panel-heading">
                <div class="row">-->
                    <div class="col-md-8 col-md-offset-2 col-sm-3">
                        <input type="text" class="form-control" id="art-head" name="art-head" placeholder="标题">
                    </div>
                    <div class="col-md-2 col-sm-1">
                        <button class="btn btn-success btn-blog-save">发布内容</button>
                    </div>
                <!--</div>
            </div>
        <!--</div>&ndash;&gt;
        <div class="panel-body">-->
           <!-- <div class="row">
                &lt;!&ndash; md文件编辑器编辑区域 后续js中会使用到 &ndash;&gt;
                <div id="blog_mdedit"></div>-->
            <!--</div>
        </div>
    </div>
</div>-->

<script src="js/jquery.min.js"></script>
<script src="js/editormd.js"></script>
<script src="js/jquery.form.js"></script>
<!--######################### MarkDown 配置###########################-->
<script type="text/javascript">

    var imgurl = "";
    var testEditor;
    $(function() {
        testEditor = editormd("test-editormd", {
            placeholder : "两眼一睁 就是coding...",
            width   : "90%",
            height  : 640,
            syncScrolling : "single",
            path    : "/lib/",
            emoji: true,
            saveHTMLToTextarea : true,
            imageUpload: true,
            imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/imgUp", //文件提交请求路径
            toolbarIcons : function() {
                return["undo", "redo", "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link", "image", "code", "code-block", "table", "datetime","emoji", "html-entities", "pagebreak", "|", "watch", "clear", "search"]
            },
        });
//editor.md期望得到一个json格式的上传后的返回值，格式是这样的：
        /*
         {
         success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
         message : "提示的信息，上传成功或上传失败及错误信息等。",
         url     : "图片地址"        // 上传成功时才返回
         }
         */
        /*
         // or
         testEditor = editormd({
         id      : "test-editormd",
         width   : "90%",
         height  : 640,
         path    : "../lib/"
         });
         */
        testEditor.getHTML();
    });
</script>
<!--######################### MarkDown ###########################-->
<script type="text/javascript">
    $('.btn-blog-save').click(function() {

        obj = document.getElementsByTagName("span");
        class_name = "cm-string";
        for(i in obj){
            if(obj[i].className == class_name){
                alert(obj[i].innerHTML);
                imgurl += obj[i].innerHTML+",";
            }
        }
        imgurl = imgurl.substr(1,imgurl.length-3);
        var title = $("#blog_title").val($("#art-head").val());
       /* alert(testEditor.getHTML()+"/br"+title.val()+"/br"+imgurl);*/
        var detail = testEditor.getHTML();
        var users = JSON.stringify(
            {"atitle": title.val(), "detail": detail,"aimage":imgurl}
        );
        $.ajax({
            type : "post",
            url:"http://localhost:8080/getWrite",
            dataType:"json",
            contentType: 'application/json;charset=utf-8',
            data:users,
            success : function() {
                alert("提交成功!");
            }
        });
    });
</script>
</body>
</html>